<template>
  <a-modal
    title="该订单已经归您所有，请尽快完成支付并确认"
    :visible="visible"
    @ok="onSubmit"
    @cancel="onCancel"
  >
    <a-form-model
      v-if="row"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 14 }"
    >
      <a-form-model-item ref="state" label="银行">
        <span class="inline-block w-48">{{ row.bank }}</span>
        <a-button
          type="link"
          class="copy-btn"
          :data-clipboard-text="row.bank"
          >复制</a-button
        >
      </a-form-model-item>
      <a-form-model-item ref="state" label="卡号">
        <span class="inline-block w-48">{{ row.bankcard }}</span>
        <a-button
          type="link"
          class="copy-btn"
          :data-clipboard-text="row.bankcard"
          >复制</a-button
        >
      </a-form-model-item>
      <a-form-model-item ref="state" label="持卡人">
        <span class="inline-block w-48">{{ row.realname }}</span>
        <a-button
          type="link"
          class="copy-btn"
          :data-clipboard-text="row.realname"
          >复制</a-button
        >
      </a-form-model-item>
      <a-form-model-item ref="state" label="币值">
        <span class="inline-block w-48">{{ row.coins }}</span>
        <a-button type="link" class="copy-btn" :data-clipboard-text="row.coins"
          >复制</a-button
        >
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>
<script>
// import { mapGetters } from 'vuex'
import ClipboardJS from 'clipboard'

export default {
  data() {
    return {
      visible: false,
      row: null,
      form: {
        state: 1,
      },
      alarm: null,
    }
  },
  computed: {
    // ...mapGetters('account', ['sys']),
  },
  mounted() {
    let clipboard = new ClipboardJS('.copy-btn')

    clipboard.on('success', (e) => {
      this.$message.success('已复制')

      e.clearSelection()
    })

    clipboard.on('error', function (e) {
      console.error('Action:', e.action)
      console.error('Trigger:', e.trigger)
    })

    this.$once('hook:beforeDestroy', () => {
      clipboard.destroy()
      clearInterval(this.alarm)
    })
  },
  methods: {
    open(row) {
      this.row = row
      this.visible = true
    },
    onSubmit() {
      this.axios.put(`/s/buys/${this.row.id}`).then((res) => {
        this.visible = false
        this.$emit('refresh')
        if (res.data.code === 1) {
          this.$message.success('购入成功')
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    onCancel() {
      this.axios.put(`/s/buys/${this.row.id}/cancel`).then((res) => {
        this.visible = false
        this.$emit('refresh')
        if (res.data.code === 1) {
          this.$message.success('取消成功')
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
  },
  watch: {
    visible(val) {
      if (val) {
        // this.alarm = setInterval(() => {
        //   console.log(333333)
        // }, 2000)
      } else {
        // clearInterval(this.alarm)
      }
    },
  },
}
</script>
